<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>检验检测智能管理平台</title>

    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!--图片选择上传控件需要的css-->
    <link rel="stylesheet" href="assets/css/fileinput.min.css"/>

    <!-- text fonts -->
    <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="assets/css/mycss.css">
</head>

<body class="no-skin" >
<div id="navbar" class="navbar navbar-default ace-save-state">

</div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>

    <div id="sidebar" class="sidebar responsive ace-save-state">

    </div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="index.html">主页</a>
                    </li>
                </ul>
            </div>
            <!--页面开始-->
            <div class="page-content max-width table-center">
                <div class="row">
                    <!--页面标题-->
                    <div class="col-xs-12">
                        <div class="page-header">
                            <h1 align="center" style="margin-left: 50px">
                                <strong>人员管理</strong>
                            </h1>
                        </div>
                    </div>
                    <!--主内容区-->
                    <div class="col-md-2">
                        <div class="widget-box widget-color-blue2">
                            <div class="widget-header">
                                <h5 class="widget-title lighter smaller">
                                    部门结构
                                </h5>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-8">
                                    <ul id="person-tree"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--该div用作展示右侧具体模版，下面有很多模版div-->
                    <div class="col-md-10">
                        <!--空内容div，没有选择具体模版时显示-->
                        <div class="center" id="contain-none" style="display: inline">
                            <h4 style="margin-top: 100px">选择部门</h4>
                        </div>
                        <!--模版-1的div，默认隐藏-->
                        <div id="contain-1" style="display: none">

                            <div class="table-responsive  width-100 table-center ">
                                <table class="table table-striped table-sm">
                                    <tbody>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>
                                    <tr>
                                        <td >11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td>11</td>
                                        <td><button class=" btn-xs btn btn-info" onclick="window.location.href='#'">
                                            <i class="ace-icon fa fa-arrow-right bigger-120"></i>
                                        </button></td>
                                    </tr>




                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div><!-- /.页面结束 -->

    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
                        <span class="bigger-120">
                            <span class="blue bolder">@浙江工业大学计算机学院</span>
                            Application &copy; 2013-2014
                        </span>
                &nbsp; &nbsp;
            </div>
        </div>
    </div>
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<script src="ownjs/head.js"></script>
<script src="ownjs/index.js"></script>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--图片选择上传插件需要的js-->
<script src="assets/js/my.js"></script>
<script src="assets/js/fileinput.min.js"></script>
<script src="assets/js/zh.js"></script>

<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="assets/js/tree.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<!--自己写的js-->
<script src="assets/js/newTecCard.js"></script>
<!-- inline scripts related to this page -->
<!--左侧树状结构导航栏的js-->
<script type="text/javascript">
    jQuery(function ($) {
        var sampleData = initiateDemoData();
        $('#person-tree').ace_tree({
            dataSource: sampleData['dataSource2'],
            loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
            'open-icon': 'ace-icon fa fa-folder-open',
            'close-icon': 'ace-icon fa fa-folder',
            'itemSelect': true,
            'folderSelect': true,
            'multiSelect': false,
            'selected-icon': null,
            'unselected-icon': null,
            'folder-open-icon': 'ace-icon tree-plus',
            'folder-close-icon': 'ace-icon tree-minus'
        }).on('selected.fu.tree', function (e, data) {
            console.log(data.target.text)
            var div_none = document.getElementById('contain-none')
            var div_contain_1 = document.getElementById('contain-1')
            // var div_text_1 = document.getElementById('text')
            div_none.style.display = 'none'
            div_contain_1.style.display = 'inline'


        });
        /**
         //Use something like this to reload data
         $('#tree1').find("li:not([data-template])").remove();
         $('#tree1').tree('render');
         */

        /**
         //please refer to docs for more info
         $('#tree1')
         .on('loaded.fu.tree', function(e) {
    })
         .on('updated.fu.tree', function(e, result) {
    })
         .on('selected.fu.tree', function(e) {
    })
         .on('deselected.fu.tree', function(e) {
    })
         .on('opened.fu.tree', function(e) {
    })
         .on('closed.fu.tree', function(e) {
    });
         */
        function initiateDemoData() {
            var tree_data_2 = {
                'bumen-1': {text: '部门A', type: 'folder', 'icon-class': 'red'},
                'bumen-2': {text: '部门B' , type: 'folder', 'icon-class': 'green'},
                'bumen-3': {text: '部门C' , type: 'folder', 'icon-class': 'green'},
                'bumen-4': {text: '部门D' , type: 'folder', 'icon-class': 'green'},
            }
            // tree_data_2['bumen-1']['additionalParameters'] = {
            //     'children': {
            //         'baogongshi-1': {text: '办公室A', type: 'folder', 'icon-class': 'pink'},
            //         'yshexianjiance': {text: '办公室B', type: 'folder', 'icon-class': 'pink'}
            //     }
            // }
            // tree_data_2['bumen-1']['additionalParameters']['children']['baogongshi-1']['additionalParameters'] = {
            //     'children': [
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> X射线-1', type: 'item'},
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> X射线-2', type: 'item'},
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> X射线-3', type: 'item'},
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> X射线-4', type: 'item'}
            //     ]
            // }
            // tree_data_2['bumen-1']['additionalParameters']['children']['yshexianjiance']['additionalParameters'] = {
            //     'children': [
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> Y射线-1', type: 'item'},
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> Y射线-2', type: 'item'},
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> Y射线-3', type: 'item'},
            //         {text: '<i class="ace-icon fa fa-file-text blue"></i> Y射线-4', type: 'item'},
            //     ]
            // }
            tree_data_2['bumen-1']['additionalParameters'] = {
                'children': [
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'}
                ]
            }
            tree_data_2['bumen-2']['additionalParameters'] = {
                'children': [
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室A', type: 'item'}
                ]
            }
            tree_data_2['bumen-3']['additionalParameters'] = {
                'children': [
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室C', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室C', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室C', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室C', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室C', type: 'item'}
                ]
            }
            tree_data_2['bumen-4']['additionalParameters'] = {
                'children': [
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室D', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室D', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室D', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室D', type: 'item'},
                    {text: '<i class="ace-icon fa fa-file-text blue"></i> 办公室D', type: 'item'}
                ]
            }
            var dataSource2 = function (options, callback) {
                var $data = null
                if (!("text" in options) && !("type" in options)) {
                    $data = tree_data_2;//the root tree
                    callback({data: $data});
                    return;
                }
                else if ("type" in options && options.type == "folder") {
                    if ("additionalParameters" in options && "children" in options.additionalParameters)
                        $data = options.additionalParameters.children || {};
                    else $data = {}//no data
                }

                if ($data != null)//this setTimeout is only for mimicking some random delay
                    setTimeout(function () {
                        callback({data: $data});
                    }, parseInt(Math.random() * 500) + 200);

                //we have used static data here
                //but you can retrieve your data dynamically from a server using ajax call
                //checkout examples/treeview.html and examples/treeview.js for more info
            }
            return {'dataSource2': dataSource2}
        }
    });
</script>
</body>
</html>
